<template>
  <div class="data-view">
    <h1 />
    <div class="iframe-container">
      <!-- 通过 iframe 显示外部的数据大屏 -->
      <iframe
        src="https://view.data-show.cn/?uuid=rW1BdAS69kTlu0j7eo9EG3hP&key=bb5fa118-e320-4023-8aad-1d5a45ce7e96"
        width="100%"
        height="100%"
        frameborder="0"
        allowfullscreen
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataView',
  data() {
    return {}
  },
  methods: {}
}
</script>

  <style scoped>
  .data-view {
    padding: 20px;
    background-color: #f5f5f5;
    height: 100vh;  /* 设置为全屏高度 */
    overflow: hidden; /* 防止内容溢出 */
  }

  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%; /* 使容器占据整个父容器的高度 */
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;  /* 隐藏任何溢出的部分 */
  }

  iframe {
    border: none;
    width: 100%;
    height: 100%; /* 使iframe占据父容器的高度 */
    pointer-events: auto; /* 允许点击iframe中的内容 */
  }
  </style>
